<template>
  <!-- 最外层的容器 -->
  <view class="my-settle-container">
    <!-- 全选区域 -->
    <label class="radio" @click="updateGoodsState">
      <radio color="#C00000" :checked="isFullCheck" /><text>全选</text>
    </label>

    <!-- 合计区域 -->
    <view class="amount-box">
      合计:<text class="amount">￥{{checkedGoodsAmount}}</text>
    </view>

    <!-- 结算按钮 -->
    <view class="btn-settle" @click="settlement">结算({{total}})</view>
  </view>
</template>

<script>
  import {mapState,mapGetters,mapMutations} from "vuex"
  export default {
    name: "my-settle",
    computed:{
      ...mapGetters("m_cart",['total','checkedCount','checkedGoodsAmount']),
      ...mapGetters("m_user",['addStr']),
      ...mapState("m_user",['token']),
      // 判断购物车中商品是否全选
      isFullCheck(){
        return this.total == this.checkedCount
      },
    },
    data() {
      return {

      };
    },
    methods:{
      ...mapMutations("m_cart",['updateAllGoodsState']),
      
      // 修改商品状态
      updateGoodsState(){
        this.updateAllGoodsState(!this.isFullCheck)
      },
      // 结算:
      settlement(){
        // 1. 先判断是否勾选了要结算的商品
          if (!this.checkedCount) return uni.$showMsg('请选择要结算的商品！')
          // 2. 再判断用户是否选择了收货地址
          if (!this.addStr) return uni.$showMsg('请选择收货地址！')
          // 3. 最后判断用户是否登录了
          if (!this.token) return uni.$showMsg('请先登录！')
      }
    }
  }
</script>

<style lang="scss">
  .my-settle-container {
    height: 50px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0;

    .radio {
      margin-left: 5px;
    }
    .amount-box{
      .amount{
        color: #c00;
        margin-left: 5px;
      }
    }
    .btn-settle {
      margin-right: 5px;
      background-color: #f00;
      color: white;
      height: 50px;
      min-width: 100px;
      line-height: 50px;
      text-align: center;
    }
  }
</style>